<template>
        <ul class="todo-main">
        <li v-for="(todo) in todos" :key="todo.id" @mouseenter="handleMouse(todo.id)" :class="{active:todo.id === currentId}">
          <label>
            <input type="checkbox" :checked="todo.done" @change="updataTodo(todo.id,$event.target.checked)" />
            <span>{{todo.title}}</span>
          </label>
          <button v-show="todo.done" class="btn btn-danger" style="display: none" @click="deleteTodo(todo.id)">删除</button>
        </li>
      </ul>
</template>

<script>
export default {
    props:['updataTodo','todos','deleteTodo'],
    data() {
      return {
        currentId:-1
      }
    },
    methods: {
      handleMouse(id){
        this.currentId = id;
      },
    }
}
</script>

<style scoped>
  .active{
     background-image: linear-gradient(to right,black,pink,white,pink,black);
    animation: donghua .5s linear 0s 1;
  }
  @keyframes  donghua {
    from{
      transform: scale(1);
    }
    to{
      transform: scale(1.2);
    }
  }
</style>